<template>
  <div>
    <div class="p-2 bg-white">
      <List :grid="{ gutter: 16, column: 4 }" :data-source="data" :pagination="paginationProp">
        <template #header>
          <div class="flex justify-end space-x-2">
            <slot name="header"> </slot>
            <Tooltip>
              <template #title>
                <div class="w-50">每行显示数量</div>
                <Slider
                  id="slider"
                  v-bind="sliderProp"
                  v-model:value="grid"
                  @change="sliderChange"
                />
              </template>
              <a-button><TableOutlined /></a-button>
            </Tooltip>
            <Tooltip @click="fetch">
              <template #title>刷新</template>
              <a-button><RedoOutlined /></a-button>
            </Tooltip>
          </div>
        </template>
        <template #renderItem="{ item }">
          <ListItem class="m-t-2">
            <BadgeRibbon text="一般人群" color="green">
              <Card hoverable size="small">
                <template #title>
                  <Tag color="pink">{{ item.gender }}</Tag>
                  <span>{{ item.name }}</span>
                  <Tag class="m-l-2" color="cyan">{{ item.age }}岁</Tag>
                </template>
                <Col>
                  <Row>
                    <div class="flex card-cell">
                      <label>身份证号：</label>
                      <span>{{ item.idCard }}</span>
                    </div>
                  </Row>
                  <Row>
                    <div class="flex card-cell">
                      <label>手机号：</label>
                      <span>{{ item.phone }}</span>
                    </div>
                  </Row>
                  <Row>
                    <div class="flex card-cell">
                      <label>建档社区：</label>
                      <span>{{ item.orgncodeName }}</span>
                    </div>
                  </Row>
                  <Row>
                    <div class="flex card-cell">
                      <label>建档人：</label>
                      <span>{{ item.buserName }}</span>
                    </div>
                  </Row>
                </Col>
              </Card>
            </BadgeRibbon>
          </ListItem>
        </template>
      </List>
    </div>
  </div>
</template>
<style lang="less">
  .card-cell {
    label {
      width: 80px;
    }
  }
</style>
<script lang="ts" setup>
  import { computed, onMounted, ref } from 'vue';
  import { RedoOutlined, TableOutlined } from '@ant-design/icons-vue';
  import {
    List,
    Card,
    Image,
    Typography,
    Tooltip,
    Slider,
    Avatar,
    Divider,
    Tag,
    Row,
    Col,
    BadgeRibbon,
  } from 'ant-design-vue';
  import { Dropdown } from '@/components/Dropdown';
  import { BasicForm, useForm } from '@/components/Form';
  import { propTypes } from '@/utils/propTypes';
  import { isFunction } from '@/utils/is';
  import { useSlider, grid } from './data';

  const ListItem = List.Item;
  const CardMeta = Card.Meta;
  const TypographyParagraph = Typography.Paragraph;
  // 获取slider属性
  const sliderProp = computed(() => useSlider(4));
  // 组件接收参数
  const props = defineProps({
    // 请求API的参数
    params: propTypes.object.def({}),
    //api
    api: propTypes.func,
    registerForm: ref(),
  });
  //暴露内部方法
  const emit = defineEmits(['getMethod', 'delete']);
  //数据
  const data = ref([]);
  // 切换每行个数
  // cover图片自适应高度
  //修改pageSize并重新请求数据

  const height = computed(() => {
    return `h-${120 - grid.value * 6}`;
  });

  //表单提交
  async function handleSubmit() {
    const data = await validate();
    await fetch(data);
  }
  function sliderChange(n) {
    pageSize.value = n * 4;
    fetch();
  }

  // 自动请求并暴露内部方法
  onMounted(() => {
    fetch();
    emit('getMethod', fetch);
  });

  async function fetch(p = {}) {
    const { api, params } = props;
    params.params = {
      page: String(page.value),
      limit: String(pageSize.value),
    };

    console.log(params);
    if (api && isFunction(api)) {
      const res = await api({ ...params, ...p });
      data.value = res.list;
      total.value = res.totalCount;
    }
  }
  //分页相关
  const page = ref(1);
  const pageSize = ref(5);
  const total = ref(0);
  const paginationProp = ref({
    showSizeChanger: false,
    showQuickJumper: true,
    pageSize,
    current: page,
    total,
    showTotal: (total: number) => `总 ${total} 条`,
    onChange: pageChange,
    onShowSizeChange: pageSizeChange,
  });

  function pageChange(p: number, pz: number) {
    page.value = p;
    pageSize.value = pz;
    fetch();
  }
  function pageSizeChange(_current, size: number) {
    pageSize.value = size;
    fetch();
  }

  async function handleDelete(id: number) {
    emit('delete', id);
  }
</script>
